import React, { Component,PropTypes } from 'react';
import '../../Stylesheets/wx/comfirmPayMoney.css';
import {AddPayOrder} from '../../Action/auth';
import UUID from 'uuid-js'
import Top from '../CommonComponent/Top'
import DelayModal from '../../Component/CommonComponent/DelayModal'
import CommonBtn from '../../Component/CommonComponent/CommonBtn'

export default class UploadImg extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            accIdImg:'',
            accIdImgUp:'',
            accIdImgFile:'',
            modalDelay:false,
            upState:false,
            imgOnline:''
        };
        this.click=true;
    }

    static contextTypes = {
        router:PropTypes.object
    }

    async componentWillMount() {
    }

    fileChange (type,e){
        this.setState({modalDelay:true})
        var file = e.target.files[0];
        var fileName = window.URL.createObjectURL(file);
        var index1=file.name.lastIndexOf(".");
        var index2=file.name.length;
        var suffix=file.name.substring(index1,index2);
        console.log(suffix);
        var uuid4 = UUID.create().toString();
        console.log(uuid4.toString());
        var storeAs = 'sq/'+uuid4+''+suffix;
        console.log(file.name + ' => ' + storeAs);
        const client = new OSS.Wrapper({
            region: 'oss-cn-shanghai',
            accessKeyId: 'LTAIbrSAT1OgIEDo',
            accessKeySecret: 'rOI5hYbqCTy3B2sb6Zbt77Is9h34XS',
            bucket: "shyt-image"
        });
        client.multipartUpload(storeAs,file).then((result)=> {
            this.setState({
                accIdImg:fileName,
                accIdImgUp:storeAs,
                accIdImgFile:file
            })
            this.setState({upState:true})
            this.setState({modalDelay:false})
            console.log(result.url);
            this.setState({
                imgOnline:result.res.requestUrls[0].split('?')[0]
            })
        }).catch(function (err) {
            console.log(err);
            this.setState({modalDelay:false})
            this.setState({upState:false})
            return false
        })

    }

    async submit(){
        if(this.click){
            this.click=false;
            const {orderNos,noType,type,payMuchMoney,grade}=this.props.location.query;
            const {imgOnline}=this.state;
            if(imgOnline==''){
                alert('请上传支付凭证')
                return;
            }
            await AddPayOrder(orderNos,noType,imgOnline,payMuchMoney,type,grade)
                .then(res=>{
                    alert('支付凭证上传成功')
                    this.click = true;
                    this.context.router.push({pathname:'/personalCenter'})
                })
                .catch(err=>{
                    console.warn('获取资料失败',err)
                    this.click = true;
                })
        }

    }

    render() {
        const {orderNos}=this.props.location.query;
        const {accIdImg,modalDelay}=this.state;
        return (
            <div className="containerNav">
                <Top
                    title ={'提交支付凭证'}
                />
                <div className="width80 center" style={{display:'block',marginTop:50}}>
                    <div className="flex flex-align-center flex-pack-justify" style={{padding:'1rem 0'}}>
                        <span className="color6">订单号:</span>
                        <span className="color9">{orderNos?orderNos:''}</span>
                    </div>
                    <div className="pAll bkr_Tr border_gray posr">
                        <input
                            type="file"
                            className='uploadFileInput'
                            onChange={(e)=>this.fileChange(1,e)}
                            ref="accIdImg"
                        />
                        {
                            accIdImg==''?
                                <div>
                                    <div className="di width100 flex flex-pack-center flex-align-center">
                                        <img src={require("../../Images/uploadImg.png")} style={{height:80,width:'auto'}} />
                                    </div>
                                    <p className="f12 tc mt5 mb0" style={{color:'#ccc'}}>上传打款截图(必填)</p>
                                </div>
                                :
                                <div style={{height:'100%'}}
                                     className="di flex flex-pack-center flex-align-center"
                                >
                                    <img src={accIdImg} style={{height:'auto',width:'auto',maxHeight:150,maxWidth:'100%'}} />
                                </div>
                        }
                    </div>
                    <div style={{margin:'1rem auto 0'}}>
                        <button
                            className='border_4 f14 colorfff width100 bgk_lv borderno comfirmBtn fontMiddle'
                            onClick = {()=>this.submit()}
                        >提交凭证</button>
                    </div>

                </div>
                {
                    modalDelay?
                        <DelayModal />
                        :null

                }
            </div>
        );
    }
}
